<template>
  <div id="ratio-list" flex="~ gap-2 pb-6" class="mb-7">
    <RatioCard
      v-for="(item, i) in ratioData"
      :key="`card-${item}`"
      :ratio="ratioData[i]"
      :active="curRatioIndex === i"
      @click="handleClick(i)"
    />
  </div>
</template>

<script setup lang="ts">
import RatioCard from './RatioCard.vue'
import { ratioData } from '@/constant';
const curRatioIndex = defineModel<number>({default: 0})

const handleClick = (index: number) => {
  curRatioIndex.value = index
}
</script>

<style scoped></style>
